<%@ taglib prefix="C" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: 山有木兮木有枝
  Date: 2021/12/1
  Time: 21:31
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <!-- 包含头部信息用于适应不同设备 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 包含 bootstrap 样式表 -->
    <link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.2.0/css/bootstrap.min.css">
    <!-- 可选: 包含 jQuery 库 -->
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <!-- 可选: 合并了 Bootstrap JavaScript 插件 -->
    <script src="https://apps.bdimg.com/libs/bootstrap/3.2.0/js/bootstrap.min.js"></script>

    <script src="${pageContext.request.contextPath}/static/js/bootstrap-fileinput.js"></script>


    <style>
        .btn-file {
            position: relative;
            overflow: hidden;
            vertical-align: middle;
        }
        .btn-file > input {
            position: absolute;
            top: 0;
            right: 0;
            width: 100%;
            height: 100%;
            margin: 0;
            font-size: 23px;
            cursor: pointer;
            filter: alpha(opacity=0);
            opacity: 0;

            direction: ltr;
        }
        .fileinput {
            display: inline-block;
            margin-bottom: 9px;
        }
        .fileinput .form-control {
            display: inline-block;
            padding-top: 7px;
            padding-bottom: 5px;
            margin-bottom: 0;
            vertical-align: middle;
            cursor: text;
        }
        .fileinput .thumbnail {
            display: inline-block;
            margin-bottom: 5px;
            overflow: hidden;
            text-align: center;
            vertical-align: middle;
        }
        .fileinput .thumbnail > img {
            max-height: 100%;
        }
        .fileinput .btn {
            vertical-align: middle;
        }
        .fileinput-exists .fileinput-new,
        .fileinput-new .fileinput-exists {
            display: none;
        }
        .fileinput-inline .fileinput-controls {
            display: inline;
        }
        .fileinput-filename {
            display: inline-block;
            overflow: hidden;
            vertical-align: middle;
        }
        .form-control .fileinput-filename {
            vertical-align: bottom;
        }
        .fileinput.input-group {
            display: table;
        }
        .fileinput.input-group > * {
            position: relative;
            z-index: 2;
        }
        .fileinput.input-group > .btn-file {
            z-index: 1;
        }
        .fileinput-new.input-group .btn-file,
        .fileinput-new .input-group .btn-file {
            border-radius: 0 4px 4px 0;
        }
        .fileinput-new.input-group .btn-file.btn-xs,
        .fileinput-new .input-group .btn-file.btn-xs,
        .fileinput-new.input-group .btn-file.btn-sm,
        .fileinput-new .input-group .btn-file.btn-sm {
            border-radius: 0 3px 3px 0;
        }
        .fileinput-new.input-group .btn-file.btn-lg,
        .fileinput-new .input-group .btn-file.btn-lg {
            border-radius: 0 6px 6px 0;
        }
        .form-group.has-warning .fileinput .fileinput-preview {
            color: #8a6d3b;
        }
        .form-group.has-warning .fileinput .thumbnail {
            border-color: #faebcc;
        }
        .form-group.has-error .fileinput .fileinput-preview {
            color: #a94442;
        }
        .form-group.has-error .fileinput .thumbnail {
            border-color: #ebccd1;
        }
        .form-group.has-success .fileinput .fileinput-preview {
            color: #3c763d;
        }
        .form-group.has-success .fileinput .thumbnail {
            border-color: #d6e9c6;
        }
        .input-group-addon:not(:first-child) {
            border-left: 0;
        }

        .row {
            margin-bottom: 30px;
            margin-right: 0 !important;
            margin-left: 0 !important;
        }

        .form-group {
            margin-bottom: 30px;
        }

        .submit {
            margin-left: 30px;
        }

        .modal-btns {
            text-align: center;
        }
        #fileInput{
            position: relative;
            left: 60px;
            /*border: #3c763d 1px solid;*/
        }
        #image{
            border-radius:8px;
            position: relative;
            left: 14px;
            background: url(${pageContext.request.contextPath}${article.newsImgUrl}) no-repeat;
            background-size:100% 100%;

        }
        #images{
            position: relative;
            left: 13px;
        }
        #fileinput-new,#fileinput-exists,#btnffa{
            border-radius:20px;
            border: none;
            background-color:#ECECED;
            /*width: 200px;*/
            /*height: 150px;*/
        }



    </style>
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <div>
            <ol class="breadcrumb">
                <li><a href="${pageContext.request.contextPath}/main/gomain"  class="btn btn-primary btn-sm" role="button"><span class="glyphicon glyphicon-home pull-right" aria-hidden="true"></span>&nbsp;&nbsp; 主&nbsp;&nbsp; 页</a></li>
                <li class="active">文章管理</li>
                <li><a href="${pageContext.request.contextPath}/article/findArticleAll?currentPage=${currentPage}&rows=${rows}">文章管理</a></li>
                <li class="active">文章添加</li>
            </ol>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-8 col-lg-offset-2">
            <form class="form-horizontal" action="#" method="post" enctype="multipart/form-data">
                <!-- 文章标题-->
                <input type="hidden" value="${article.newsId}" name="newsId">
                <div class="form-group">
                    <label for="articleTitle" class="col-lg-2 control-label">标题</label>
                    <div class="col-lg-10">
                        <input type="text" class="form-control" id="articleTitle" name="newsTitle" placeholder="输入标题" value="${article.newsTitle}">
                        <span id="newsTitleMessage"></span>
                    </div>
                </div>

                <div class="form-group">
                    <label for="newsSummary" class="col-lg-2 control-label">简&nbsp;&nbsp;&nbsp;&nbsp;介</label>
                    <div class="col-lg-10">
                        <input type="text" class="form-control" id="newsSummary" name="newsSummary"
                               placeholder="输入简介" value="${article.newsSummary}">
                    </div>
                </div>

                <!-- 演示初始化下拉列表的功能 -->
                <div class="form-group">
                    <label for="articleType" class="col-lg-2 control-label">文章类型</label>
                    <div class="col-lg-10">
                        <select class="form-control" name="typeId" id="articleType">
                            <C:forEach items="${types}" var="type">
                                <C:if test="${type.typeId==article.typeId}">
                                    <option value="${type.typeId}" selected>${type.typeName}</option>
                                </C:if>
                                <C:if test="${type.typeId!=article.typeId}">
                                    <option value="${type.typeId}">${type.typeName}</option>
                                </C:if>
                            </C:forEach>
                        </select>
                    </div>
                </div>

                <div class="form-group" id="fileInput">
                    <div class="col-md-8">
                        <label class="control-label col-lg-2" for="uploadImage">图片</label>
                        <div class="fileinput fileinput-new" data-provides="fileinput" id="uploadImageDiv">
                            <div class="fileinput-new thumbnail" style="width: 200px; height: 150px;" id="image">
                                <img src="" alt=""  />
<%--                               --%>
                            </div>
                            <div class="fileinput-preview fileinput-exists thumbnail" style="max-width: 200px; max-height: 150px;" id="images"></div>
                            <div>
                        <span class="btn default btn-file">
                            <button class="fileinput-new" id="fileinput-new">修改图片</button>
                            <button class="fileinput-exists" id="fileinput-exists">更改</button>
                            <input type="file" name="file" id="uploadImage"/></span>
                                <button  class="btn default fileinput-exists" id="btnffa" data-dismiss="fileinput">移除</button>
                                <span id="fileMessage">请选择5M以下的图片</span>
                            </div>
                        </div>
                        <div id="titleImageError" style="color: #a94442"></div>

                    </div>
                </div>



                <div class="form-group">
                    <label class="control-label col-lg-2" for="content">文章内容</label>
                    <div class="col-lg-10">
                        <textarea rows="30" cols="62" name="newsContent" id="content" class="form-control">${article.newsContent}</textarea>
                        <span id="newsContentMessage"></span>
                    </div>
                </div>

                <div class="modal-btns">
                    <button type="submit" class="btn btn-primary submit">发 布</button>
                </div>
            </form>
        </div>
    </div>
</div>
<script>

    let titleFlag=true;
    let contentFlag=true;
    function showMessage(slecter,message){
        $(slecter).text(message).css("color","red")
    }
    function showMessage2(slecter,message){
        $(slecter).text(message).css("color","green")
    }
    $("#articleTitle").blur(function (){
        showMessage("#newsTitleMessage","")
        let val=$(this).val().trim();
        if(val===""){
            showMessage("#newsTitleMessage","文章标题不能为空");
            titleFlag=false
        }else if(!/^[a-zA-Z0-9\u4E00-\u9FFF]{4,}$/.test(val)){
            showMessage("#newsTitleMessage","文章标题不满足规则");
            titleFlag=false
        }else if (val==='${article.newsTitle}'){
            showMessage2("#newsTitleMessage","文章标题符合规则");
            titleFlag=true
        }
        else {
            $.ajax({
                url: "${pageContext.request.contextPath}/article/findByTitle",
                type:"get",
                data:{
                    title:val
                },
                success:function (data){
                    if(data){
                        showMessage2("#newsTitleMessage","文章标题符合规则");
                        titleFlag=true
                    }else {
                        showMessage("#newsTitleMessage","文章标题已存在");
                        titleFlag=false;
                    }
                }
            })
        }
    }).focus(function (){
        showMessage("#newsTitleMessage","");
        titleFlag=false;
    })
    $("#fileinput-new").focus(function (){
        showMessage("#fileMessage","");
    })
    $("#content").blur(function (){
        if($("#content").val().trim()===""){
            showMessage("#newsContentMessage","文章内容不能为空");
            contentFlag=false
        }else {
            contentFlag=true
            showMessage2("#newsContentMessage","文章内容格式正确");

        }
    }).focus(function (){
        contentFlag=false
        showMessage("#newsContentMessage","");
    })

    $("button[type='submit']").click(function (){
        const formDate=new FormData($("form")[0]);  //获取表单里的值
        if(contentFlag===true&&titleFlag===true){
            formDate.append("file",$("#uploadImage")[0].files[0]); //有文件，需要添加文件
            $.ajax({
                url:"${pageContext.request.contextPath}/article/updateAjaxArticle",
                type: "post",
                data: formDate,
                //cache 为ture时，第二次提交时提交缓存里的数据，为false每次都会提交新的数据
                cache:false,
                //async 默认ture，异步请求，false同步请求
                async:false,
                //请求头设置,为false提交表单设置好的请求头
                contentType:false,
                //处于同样的理由，如果 processData 为 true,会被处理并转换为 query string。所以这里也需设为 false。
                processData:false,
                success:function (ajaxMessage){
                    console.log(ajaxMessage);
                    if(ajaxMessage.success){
                        alert(ajaxMessage.message)
                        window.location.href="${pageContext.request.contextPath}/article/findArticleAll?rows=${rows}"
                    }else {
                        switch (ajaxMessage.code){
                            case 100:
                                $.each(ajaxMessage.details.errors,function (i,n){
                                    showMessage("#"+n.field+"Message",n.defaultMessage)
                                })
                                break;
                            case 150:
                                alert(ajaxMessage.message)
                                break;
                            default:
                                showMessage("#fileMessage",ajaxMessage.message);
                                break;
                        }
                    }
                }
            })
        }else {
            alert("请检查输入的文章格式是否正确！")
        }

        return false;
    })
</script>
</body>
</html>
